<!-- 通用表单组件: pForms -->
<template>
	<view class="form-body">
		<u-form :model="form" ref="uForm" :rules="rules">
			<u-form-item label="名称" prop="name" required>
				<u-textarea v-model="form.name" clearable border="none" :height="50" autoHeight
					placeholder="请输入名称"></u-textarea>
			</u-form-item>
			<u-divider></u-divider>
			<u-form-item label="行政区" prop="xzq" required @click="clickXzq">
				<u-input v-model="form.xzq" readonly clearable border="none" :height="50" autoHeight
					placeholder="请选择行政区"></u-input>
			</u-form-item>
			<u-divider></u-divider>
			<u-form-item label="详细地址" prop="address" required>
				<u-textarea v-model="form.address" clearable :maxlength="50" count border="none" :height="50" autoHeight
					placeholder="请输入详细地址"></u-textarea>
			</u-form-item>
			<u-divider></u-divider>
			<u-form-item label="正门坐标" prop="zmzb" required @click="clickAddressMap">
				<u-input v-model="form.zmzb" readonly clearable border="none" :height="50" autoHeight>
					<view slot="prefix">
						<view v-show="form.longitude">经度 {{ form.longitude }}</view>
						<view v-show="form.latitude" style="margin-top: 10rpx;">纬度 {{ form.latitude }}</view>
					</view>
					<u-icon slot="suffix" name="map-fill"></u-icon>
				</u-input>
			</u-form-item>
			<u-divider></u-divider>
			<u-form-item label="填埋/堆存场是否存在以下设施" prop="dx" required>
				<u-input v-show="false" v-model="form.dx"></u-input>
				<u-checkbox-group iconPlacement="right" placement="column" style="width: 100%;"
					@change="checkboxGroupChange">
					<view v-for="(item, index) in checboxList" :key="item.value">
						<u-checkbox :name="item.value" class="mtb-30" :label="item.name"></u-checkbox>
						<u-divider></u-divider>
					</view>
				</u-checkbox-group>
			</u-form-item>
		</u-form>
		<cityPicker :visible="visible" @confirm="cityPickerConfirm" @cancel="() => visible = false"></cityPicker>
		<u-button style="margin-top: 50rpx;" @click="submit">提交</u-button>
	</view>
</template>

<script>
	import cityPicker from '@/components/form/cityPicker.vue';
	export default {
		components: {
			cityPicker
		},
		props: {
			placeholder: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {
				visible: false,
				checboxList: [{
						name: '防渗衬层系统',
						value: 0,
					},
					{
						name: '防渗衬层系1',
						value: 1,
					},
					{
						name: '防渗衬层系统2',
						value: 2,
					}
				],
				form: {
					name: '祥云县禾甸镇裕洁园垃圾污水处理有限公司垃圾处理填埋场地块',
					xzq: '',
					address: '',
					zmzb: '',
					latitude: '',
					longitude: '',
					dx: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					xzq: [{
						required: true,
						message: '请输入行政区',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: ['blur', 'change']
					}],
					zmzb: [{
						required: true,
						message: '请选择正门坐标',
						trigger: ['blur', 'change']
					}],
					dx: [{
						required: true,
						message: '请选择设施',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		methods: {
			/**
			 * 任一个checkbox状态发生变化时触发，回调为一个对象
			 */
			checkboxGroupChange(e) {
				console.log('任一个checkbox状态发生变化时触发:', e);
				this.form.dx = e.toString();
			},
			/**
			 * 行政区选择点击确定
			 */
			cityPickerConfirm(e) {
				this.visible = false;
				const {
					code,
					name
				} = e;
				console.log('行政区选择点击确定', name, code);
				this.form.xzq = name;
			},
			/**
			 * 选择行政区
			 */
			clickXzq() {
				console.log('选择行政区');
				this.visible = true;
			},
			/**
			 * 获取经纬度
			 */
			clickAddressMap() {
				console.log('获取经纬度');
				const that = this;
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						const {
							address,
							latitude,
							longitude
						} = res;
						that.form.zmzb = address;
						that.form.latitude = latitude;
						that.form.longitude = longitude;
						that.form.address = address;
					}
				});
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-body {
		padding: $padding-base;
	}
</style>